<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/jQuery.lazyload.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main.css">
  <script src="./js/main.js"></script>
  <script src="./js/common.js"></script>
  <title>首页</title>
</head>

<body>
  <div id="app">
    <div id="totopBtn" title="回到顶部">
      <svg t="1601527840231" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http\://www.w3.org/2000/svg"
        p-id="3897" width="50" height="50">
        <path
          d="M511.732364 1023.755636c69.003636 0 136.029091-13.498182 199.168-40.145454a508.241455 508.241455 0 0 0 162.536727-109.649455 511.662545 511.662545 0 0 0 109.649454-162.536727c26.647273-63.010909 40.145455-130.036364 40.145455-199.168 0-69.026909-13.498182-136.029091-40.145455-199.179636a508.241455 508.241455 0 0 0-109.649454-162.536728 511.662545 511.662545 0 0 0-162.536727-109.649454C647.889455 14.242909 580.864 0.744727 511.732364 0.744727c-69.026909 0-136.029091 13.498182-199.179637 40.145455a508.241455 508.241455 0 0 0-162.536727 109.649454 511.662545 511.662545 0 0 0-109.649455 162.536728C13.719273 376.087273 0.221091 443.112727 0.221091 512.256c0 69.003636 13.498182 136.029091 40.145454 199.168a508.241455 508.241455 0 0 0 109.649455 162.536727A511.662545 511.662545 0 0 0 312.552727 983.621818a509.754182 509.754182 0 0 0 199.179637 40.145455z m-1.128728-597.410909L321.431273 615.540364a29.626182 29.626182 0 0 1-42.007273 0 29.626182 29.626182 0 0 1 0-42.007273l210.036364-210.059636c11.636364-11.636364 30.394182-11.636364 42.018909 0l210.048 210.048a29.626182 29.626182 0 0 1 0 42.007272 29.626182 29.626182 0 0 1-42.007273 0L510.603636 426.356364z"
          p-id="3898" fill="#2c2c2c"></path>
      </svg>
    </div>
    <div class="Header">
      <img src="./img/logo.png">
      <h4>蓉城——文化之旅</h4>
      <ul>
        <li><a id="nav-docs">首页</a></li>
        <li><a id="nav-updates" href="./pages/Page1.html">产品商城</a></li>
        <li><a id="nav-extend" href="./pages/Page3.html">旅游资讯</a></li>
        <li><a id="nav-blogs" href="./pages/Page4.html">旅游攻略</a></li>
        <li><a id="nav-extend" href="./pages/Page5.html">美食推荐</a></li>
      </ul>
    </div>
    <div class="carouselBox">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1500">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" v-for="(item, index) in carousel" :key="index" :data-slide-to="index"
            :class="[index ? '' : 'active']"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div v-for="(item, index) in carousel" :key="index" :class="[index ? 'item' : 'item active']">
            <img :src="`./img/carousel/img${index + 1}.webp`">
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <div>
          <a class="carousel-control left" href="#myCarousel" data-slide="prev"><img class="leftBtn"
              src="./img/left.png"></a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next"><img class="rightBtn"
              src="./img/right.png"></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row oBox-1">
        <div class="col-lg-3 col-md-3 col-sm-6" v-for="(item, index) in items" :key="index"
          @click="this.open(item.href)">
          <div class="row">
            <div class="col-lg-4 icon">
              <img class="oDownimg lazy" :data-original="`./img/icon-${index + 1}.png`">
            </div>
            <div class="col-lg-8 text">
              <h3>{{item.title}}</h3>
              <span>{{item.desc}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container P1imgBox">
      <div class="col-lg-12">
        <div class="col-lg-6"><img src="./img/templeft.jpg" alt=""></div>
        <div class="col-lg-6">
          <div><img class="jkli" src="./img/P3-pic9.png" alt=""></div>
          <div><img class="iyxilu" src="./img/P3-pic4.jpg" alt=""></div>
        </div>
      </div>
      <div class="col-lg-12" style="position: relative;width: 100%;">
        <div style="position: absolute;width: 97.3%;height: 100%;background-color: #333;opacity: .5;"></div>
        <div style="position: absolute;width: 100%;height: 100%;color: white;padding: 50px;">
          <h2>杜甫草堂</h2>
          <div class="row" style="padding-top: 50px;">
            <div class="col-lg-6">
              <h3>简介</h3>
              杜甫草堂，是中国唐代大诗人杜甫流寓成都时的故居，位于四川省成都市青羊区青华路38号。杜甫先后在此居住近四年，创作诗歌240余首。唐末诗人韦庄寻得草堂遗址，重结茅屋，使之得以保存，宋元明清历代都有修葺扩建。
            </div>
            <div class="col-lg-6">
              <h3>包含景点</h3>
              杜甫草堂总面积近300亩，按功能区分为：文物景点游览区（草堂旧址）、园林景点游览区（梅园）和服务区（草堂寺）。草堂旧址内，照壁、正门、大廨、诗史堂、柴门、工部祠排列在一条中轴线上，两旁配以对称的回廊与其它附属建筑，其间有流水萦回，小桥勾连，竹树掩映，显得既庄严肃穆、古朴典雅而又幽深静谧、秀丽清朗。工部祠东侧有一座“少陵草堂”碑亭。
            </div>
          </div>
          <div class="row" style="padding-top: 50px;">
            <div class="col-lg-6">
              <h3>建筑特点</h3>
              杜甫草堂在宋元明清历代都有修葺扩建，已演变成一处集纪念祠堂格局和诗人旧居风貌为一体，建筑古朴典雅、园林清幽秀丽的著名文化圣地。草堂完整保留着清代嘉庆重建时的格局，是独特的“混合式”中国古典园林。
            </div>
            <div class="col-lg-6">
              <h3>文物价值</h3>
              成都杜甫草堂内珍藏有各类资料3万余册，文物2000余件。包括宋、元、明、清历代杜诗精刻本、影印本、手抄本以及近代的各种铅印本，还有15种文字的外译本和朝鲜、日本出版的汉刻本120多种，是有关杜甫平生创作馆藏最丰富、保存最完好的地方
            </div>
          </div>
        </div>
        <img src="./img/P3-pic5.webp" style="margin: 0;padding: 0;width: 100%;" alt="">
      </div>
      <div class="col-lg-12" style="margin: 0;padding: 0;">
        <div class="col-lg-4"><img src="./img/P3-pic6.jpg" alt=""></div>
        <div class="col-lg-4"><img src="./img/P3-pic7.webp" alt=""></div>
        <div class="col-lg-4"><img src="./img/P3-pic8.jpg" alt=""></div>
      </div>
    </div>
    <div class="container">
      <div class="row oBox-5">
        <div class="col-lg-4 col-md-4">
          <h1>01</h1>
          <p>文化娱乐</p>
          <span>柳叶黛细，桑条纤柔的诗意；茶馆里，麻将桌上的家长里短；高新区，天府新区迸发现代活力</span>
          <img data-original="./img/icon1.png" alt="" class="img-responsive lazy">
        </div>
        <div class="col-lg-4 col-md-4">
          <h1>02</h1>
          <p>艺术设计</p>
          <span>老城区大街小巷的历史表现力；美术馆，博物馆提升你的感知力；苍蝇馆子颠覆你对食物的想象力</span>
          <img data-original="./img/icon2.png" alt="" class="img-responsive lazy">
        </div>
        <div class="col-lg-4 col-md-4">
          <h1>03</h1>
          <p>旅游纪念</p>
          <span>憨态可掬的国宝熊猫，养育成都千年的水利工程，春熙路的商业化，青城山的道教文化，期待你的到来</span>
          <img data-original="./img/icon3.png" alt="" class="img-responsive lazy">
        </div>
      </div>
    </div>
    <div class="container" style="margin-top: 20px;margin-bottom: 20px;">
      <h2 style="text-align: center;margin-bottom: 30px;">川蜀文化</h2>
      <div class="Box2">
        <div>
          <h3 style="margin-bottom: 20px;">成都——文化名城</h3>
          <p>
            成都作为国家历史文化名城，古蜀文明发祥地，具有“天府之国”的美称。孕育出了历史悠久、内涵丰富的天府文化，也孕育出了蜀绣、蜀锦、瓷胎竹编、川剧变脸等一大批非遗瑰宝。包含成都方言、特色节日、嫁娶习俗、饮食、曲艺、宗教等方面介绍成都传统文化。
          </p>
        </div>
        <div style="width: 10%;"></div>
        <div><img src="./img/c.jpg" alt=""></div>
      </div>
    </div>
  </div>
</body>

</html>